<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>违章查询</title>
    <style>
        #result td {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="result">
        <form id="search" action="/search/" method="post">
            {% csrf_token %}
            <input type="text" name="carinfo" value="{{ carinfo }}" size="30" placeholder="请输入车牌号或车主姓名">
            <input type="submit" value="查询">
        </form>
        <hr>
        {% if records %}
        <table>
            <tr>
                <th width="100">车牌号</th>
                <th width="100">车主姓名</th>
                <th width="150">违章原因</th>
                <th width="180">违章时间</th>
                <th width="180">处罚方式</th>
                <th width="100">是否受理</th>
                <th width="120">操作</th>
            </tr>
            {% for record in records %}
            <tr>
                <td>{{ record.car.carno }}</td>
                <td>{{ record.car.owner }}</td>
                <td>{{ record.reason }}</td>
                <td>{{ record.makedate }}</td>
                <td>{{ record.punish }}</td>
                <td>{{ record.dealt | yesno:'已受理,未受理' }}</td>
                <td>
                    <a class="handle" href="/handle/?rno={{ record.no }}">受理</a>
                    <a class="delete" href="/delete/?rno={{ record.no }}">删除</a>
                </td>
            </tr>
            {% endfor %}
        </table>
        <div class="buttons">
            <button data="/search/?currentPage=1">首页</button>&nbsp;&nbsp;
            {% if has_prev %}<button data="/search/?currentPage={{ prev_page }}">上一页</button>&nbsp;&nbsp;
            {% else %}<button disabled>上一页</button>&nbsp;&nbsp;
            {% endif %}
            第{{ current_page }}页/共{{ total_page }}页&nbsp;&nbsp;
            {% if has_next %}<button data="/search/?currentPage={{ next_page }}">下一页</button>&nbsp;&nbsp;
            {% else %}<button disabled>下一页</button>&nbsp;&nbsp;
            {% endif %}
            <button data="/search/?currentPage={{ total_page }}">末页</button>
        </div>
        {% endif %}
    </div>
    <a id="export" href="/export/">导出Excel</a>
    <a href="/show_charts/">查看统计报表</a>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function loadPageData(evt) {
            $('#search').attr(
                'action', $(evt.target).attr('data')
            ).trigger('submit')
        }

        $(() => {
            $('#export').on('click', (evt) => {
                evt.preventDefault()
                let url = $(evt.target).attr('href')
                let queryParam = '?carinfo=' + $('input[name="carinfo"]').val()
                location.href = url + queryParam
            })

            $('.buttons>button').on('click', loadPageData)
            $('.handle').on('click', (evt) => {
                evt.preventDefault()
                let url = $(evt.target).attr('href')
                $.getJSON(url, (json) => {
                    if (json.code === 10000) {
                        $(evt.target).parent().prev().text('已受理')
                    }
                })

            })
            $('.delete').on('click', (evt) => {
                evt.preventDefault()
                if (confirm('确定删除该记录吗？')) {
                    let url = $(evt.target).attr('href')
                    $.getJSON(url, (json) => {
                        if (json.code === 10000) {
                            $(evt.target).parent().parent().remove()
                        } else {
                            alert('尚未受理违章信息，不能删除!!!')
                        }
                    })
                }
            })
        })
    </script>
</body>
</html>